<template>
<div class="pagination-box">
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="params.pageNum" :page-sizes="[10,20,30, 40]" :page-size="params.pageSize" layout="total,  prev, pager, next, sizes,jumper" :total="total"></el-pagination>
</div>
</template>

<script>
export default {
    methods: {
        // 分页
        //数据条数发生变化
        handleSizeChange(newSize) {
            this.params.pageSize = newSize;
            this.$store.commit('PortalManagement/SET_PAGE_SIZE', newSize)
            this.get();
        },
        //翻页触发
        handleCurrentChange(currPage) {
            this.params.pageNum = currPage;
            this.$store.commit('PortalManagement/SET_PAGE_NUM', currPage)
            this.get();
        },
    },
    data() {
        return {};
    },
    props: ["total", "params", "get"],
};
</script>

<style lang="less">
.pagination-box {
    display: flex;
    justify-content: flex-end;

    .el-pagination {
        .el-pagination__sizes {
            .el-input__inner {
                width: 110px;
            }
        }

        .el-pagination__jump {
            .el-input__inner {
                width: 36px;
            }
        }
    }

    .el-pagination__editor {
        width: 45px !important;
    }
}
</style>
